<template>
  <a-row :gutter='8'>
    <a-col :xs='24' :sm='24' :md='24' :lg='24' :xl='10'>
      <!--左上第一个方块-->
      <a-card hoverable style="min-height: 160px">
        <a-row>
          <a-col :span="12">
            <!-- <a-icon :component="cpu" class="ico"/> -->
            <!-- <i class="icon icon-cpu24f normal-icon"></i> -->
            <Iconfont class="icon normal-icon" type="icon-cpu24f"></Iconfont>
            <span class="main block">{{$t('Usage-rate')}}：{{allcpu.percent? allcpu.percent : '-'}}</span>
            <span>{{$t('Total-frequency')}}：{{allcpu.total? allcpu.total : '-'}}</span><!--GHz-->
          </a-col>
          <a-col :span="12">
            <!-- <a-icon :component="memory" class="ico" style="padding-top:.5rem" /> -->
            <!-- <i class="icon icon-memory24f normal-icon"></i> -->
            <Iconfont class="icon normal-icon" type="icon-memory24f"></Iconfont>
            <span class="block main">{{$t('Usage-rate')}}：{{mem.percent? mem.percent: '-'}}</span>
            <span>{{$t('Total-memory')}}：{{mem.total? mem.total : '-'}}</span>
          </a-col>
        </a-row>
        <a-row style="margin-top:.8em">
          <a-table
            :columns="cpucolums"
            :dataSource="cpudata"
            :pagination="false "
            :scroll="{y:113}"
            :loading="loading"
            size="small"
            rowKey="hostname"
            :locale="defaultSetting"
          >
            <template slot="cpu" slot-scope='text, record'>
              <span>{{record.cpu}}</span>
              <!-- <span>{{record.cpu.toFixed(2)}}</span> -->
            </template>
            <template slot="mem" slot-scope='text, record'>
              <span>{{record.mem}}</span>
              <!-- <span>{{record.mem.toFixed(2)}}</span> -->
            </template>
          </a-table>
        </a-row>
      </a-card>
      <!--左下第一个方块, 磁盘使用率-->
      <a-card hoverable style="margin:.5em 0; min-height: 160px">
        <a-row>
          <a-col :span="24">
            <!-- <a-icon :component="disk" class="ico" /> -->
            <!-- <i class="icon icon-disk24f normal-icon"></i> -->
            <Iconfont class="icon normal-icon" type="icon-disk24f"></Iconfont>
            <span class="block main">{{$t('Usage-rate')}}：{{alldisk.usage? alldisk.usage : '-'}}</span>
            <span>{{$t('Total-capacity')}}：{{alldisk.total? alldisk.total : '-'}}</span>
          </a-col>
        </a-row>
        <a-row style="margin-top:.8em">
          <a-row :gutter="12">
            <a-col :span="12" v-for="(d,index) in diskdata" :key="index" style="margin:.22em 0">
              <a-col :span="$store.state.language==='zh'?10:13" style="padding: 0.25em">{{d.name}}</a-col><!--background-color:#E6F4FF-->
              <a-col :span="$store.state.language==='zh'?14:11" style="text-align:center; padding: 0.25em">{{d.speed}}</a-col><!--background-color:#F1F8FF;-->
            </a-col>
          </a-row>
        </a-row>
      </a-card>
    </a-col>
    <!--工作网卡数-->
    <a-col :xs='24' :sm='24' :md='24' :lg='24' :xl='14'>
      <a-card hoverable style="min-height: 403px">
        <a-row>
          <a-col :span="8">
            <!-- <a-icon :component="net" class="ico" style="padding-top:.5rem" /> -->
            <!-- <i class="icon icon-net24f normal-icon"></i> -->
            <Iconfont class="icon normal-icon" type="icon-net24f"></Iconfont>
            <span class="block main">{{$t('Problem-network-cards')}}：{{allnet.nics? allnet.nics.length: '0'}} {{$t('Piece')}}</span>
            <span>{{$t('Total-network-cards')}}：{{allnet.total? allnet.total :'0'}} {{$t('Piece')}}</span>
          </a-col>
          <a-col :span="16" class="net">
            <a-col :span="6" v-for="(value,key,index) in allnet.lan" :key="index">
              <a-tooltip placement="top">
                <template slot="title">
                  <!--External-service-network-->
                  <span v-if="key == 'plane_business'">{{$t('Business-service-network')+value}}</span>
                  <!-- management -->
                  <span v-if="key == 'plane_manage'">{{$t('Management-service-network')+value}}</span>
                  <!-- storage -->
                  <span v-if="key == 'plane_cluster'">{{$t('Storage-network')+value}}</span>
                </template>
                <!-- <i class="icon icon-networksegment24f net-segment-icon"></i> -->
                
                <Iconfont class="icon net-segment-icon" type="icon-networksegment24f"></Iconfont>
                <!-- <a-icon
                  :component="netseg"
                  style="font-size:2.5em;color: var(--themeColor);margin-top:.5rem"
                /> -->
              </a-tooltip>
            </a-col>
            <!-- <a-col :span="6">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{allnet.lan ? $t('External-service-network')+allnet.lan.manager : ''}}</span>
                </template>
                <a-icon
                  :component="netseg"
                  style="font-size:2.5em;color: #0785FD;margin-top:.5rem"
                />
              </a-tooltip>
            </a-col>
            <a-col :span="6">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{allnet.lan ? $t('Storage-network')+allnet.lan.store : ''}}</span>
                </template>
                <a-icon
                  :component="netseg"
                  style="font-size:2.5em;color: #0785FD;margin-top:.5rem"
                />
              </a-tooltip>
            </a-col> -->
          </a-col>
        </a-row>
        <!-- <a-row style="margin-top:.8em" :gutter="8">
          <a-col :span="8" v-for="(n,index) in netdata" :key="index" style="margin:.5em 0">
            <a-col :span="10" style="background-color:#E6F4FF; padding: 0.25em">{{n.name}}</a-col>
            <a-col :span="14" style="background-color:#F1F8FF;text-align:center; padding: 0.25em">{{n.status}}</a-col>
          </a-col>
        </a-row> -->
        <a-row style="margin-top:.8em">
          <a-table
            :columns="netcolums"
            :dataSource="nettable"
            :pagination="false "
            :scroll="{y:265}"
            :loading="loading"
            size="small"
            :rowKey="(record) => record.hostname+record.name" 
            :locale="defaultSetting"
          ></a-table>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
// import cpu from "../../../static/images/svg/ic_CPU.svg";
// import net from "../../../static/images/svg/ic_net.svg";
// import memory from "../../../static/images/svg/ic_memory.svg";
// import disk from "../../../static/images/svg/ic_disk.svg";
// import netseg from "../../../static/images/svg/ic_networksegment.svg";
import EmptyData from '@/components/common/EmptyData'
//import store from '../../store.js'

import request from '@/request/request'

export default {
  name: "Othermsg",
  components: { EmptyData },
  // template: '<a-icon :component = ",cpu,memory,netseg,disk,net" />',
  data() {
    return {
      // net,
      // cpu,
      allcpu: {},
      mem: {},
      // memory,
      // disk,
      alldisk: {},
      allnet: {},
      // netseg,
      cpucolums:[
        { title: this.$t('Node'), dataIndex: "hostname", width: 150.0},
        { title: "CPU"+this.$t('Usage-rate')+"（%）", dataIndex: "cpu",width: 150, scopedSlots:{customRender:'cpu'} },
        { title: this.$t('Memory')+this.$t('Usage-rate')+"（%）",dataIndex: "mem", width: 150, scopedSlots:{customRender:'mem'} }
        ],
      netcolums:[
        { title: this.$t('Host'), dataIndex: "hostname", width: 150 },
        { title: this.$t('Network-card'), dataIndex: "name", width: 150 },
        // { title: this.$t('Mode'), dataIndex: "mode", width: 150 }
        { title: this.$t('Bandwidth'), dataIndex: "bandwidth", width: 150 }
      ],
      cpudata: [],
      diskdata: [
        { name: this.$t('Wr-speed'), speed: "" },
        { name: this.$t('Total-wr'), speed: "" },
        // { name: this.$t('Total-wr-time'), speed: "" },
        { name: this.$t('Rd-speed'), speed: "" },
        { name: this.$t('Total-rd'), speed: "" },
        // { name: this.$t('Total-rd-time'), speed: "" },
        // { name: this.$t('Waiting-time'), speed: "" }
      ],
      netcard: [],
      netdata: [
        { name: this.$t('NIC-Match'), status: "" },
        { name: this.$t('Connections'), status: "" },
        // { name: this.$t('Receive-packet-loss'), status: "" },
        // { name: this.$t('Send-packet-loss'), status: "" },
        { name: this.$t('Current-bandwidth'), status: "" }
      ],
      nettable: [],
      timeoutId: "",
      loading: true,
      defaultSetting: {emptyText:<EmptyData />}
    };
  },
  mounted() {
    this.getdata();
    this.timeoutId = setInterval(this.getdata, 90000);
  },
  destroyed() {
    clearInterval(this.timeoutId); //清除定时器
  },
  computed:{
    getlanguage(){
      return this.$store.state.language
    }
  },
  watch:{ 
    getlanguage(val){  //监听语言切换，切换data组件内的多语言
      this.getdata();
      this.cpucolums=[
        { title: this.$t('Node'), dataIndex: "hostname", width: 150.0 },
        { title: "CPU"+this.$t('Usage-rate')+"（%）", dataIndex: "cpu", width: 150 },
        { title: this.$t('Memory')+this.$t('Usage-rate')+"（%）", dataIndex: "mem", width: 150 }
        ]
      this.netcolums=[
        { title: this.$t('Host'), dataIndex: "hostname", width: 150 },
        { title: this.$t('Network-card'), dataIndex: "name", width: 150 },
        // { title: this.$t('Mode'), dataIndex: "mode", width: 150 }
        { title: this.$t('Bandwidth'), dataIndex: "bandwidth", width: 150 }
        ]
      this.diskdata= [
        { name: this.$t('Wr-speed'), speed: "" },
        { name: this.$t('Total-wr'), speed: "" },
        // { name: this.$t('Total-wr-time'), speed: "" },
        { name: this.$t('Rd-speed'), speed: "" },
        { name: this.$t('Total-rd'), speed: "" },
        // { name: this.$t('Total-rd-time'), speed: "" },
        // { name: this.$t('Waiting-time'), speed: "" }
      ]
      this.netdata= [
        { name: this.$t('NIC-Match'), status: "" },
        { name: this.$t('Connections'), status: "" },
        // { name: this.$t('Receive-packet-loss'), status: "" },
        // { name: this.$t('Send-packet-loss'), status: "" },
        { name: this.$t('Current-bandwidth'), status: "" }
      ]
    }
  },
  methods: {
    getdata() {
      if (this.cpudata.length == 0 || this.nettable.length == 0) {
        this.loading = true
      } 
      request('get', "machine/status_summary")
        // .get(this.allurl + "status/machine")
        .then(res => {
          console.log('物理资源概览信息', res)
          if(res.data.flag == 1) {
            this.model(res.data.id) //返回模板
            this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
          }else {
            this.cpudata = res.data.compute.detail;
            this.nettable = res.data.net.nics;
            this.allcpu = res.data.compute.cpu;
            this.mem = res.data.compute.mem;
            // this.mem.total = this.bytesToSize(res.data.compute.mem.total);
            this.mem.total = res.data.compute.mem.total;

            this.alldisk = res.data.disk;
            for (const iterator of this.diskdata) {
              if (iterator.name == this.$t('Wr-speed')) { //写速度
                // iterator.speed = this.bytesToSize2(this.alldisk.ops);
                iterator.speed = this.alldisk.ops;
              } else if (iterator.name == this.$t('Total-wr')) { //总写量
                // iterator.speed = this.bytesToSize(res.data.disk.write_all);
                iterator.speed = res.data.disk.write_all;
              // } else if (iterator.name == this.$t('Total-wr-time')) {
              //   iterator.speed = this.timeTosize(this.alldisk.write_time);
              } else if (iterator.name == this.$t('Rd-speed')) { //读速度
                // iterator.speed = this.bytesToSize2(this.alldisk.ips);
                iterator.speed = this.alldisk.ips;
              } else if (iterator.name == this.$t('Total-rd')) { //总读量
                // iterator.speed = this.bytesToSize(res.data.disk.read_all);
                iterator.speed = res.data.disk.read_all;
              // } else if (iterator.name == this.$t('Total-rd-time')) {
              //   iterator.speed = this.timeTosize(this.alldisk.read_time);
              // } else if (iterator.name == this.$t('Waiting-time')) {
              //   iterator.speed = this.timeTosize(this.alldisk.busy_time);
              }
            }
            // for (var i = 0; i < this.diskdata.length; i++) {
            //   if (this.diskdata[i].name == this.$t('Wr-speed')) { //写速度
            //     // this.diskdata[i].speed = this.bytesToSize2(this.alldisk.ops);
            //     this.diskdata[i].speed = this.alldisk.ops;
            //   } else if (this.diskdata[i].name == this.$t('Total-wr')) { //总写量
            //     // this.diskdata[i].speed = this.bytesToSize(res.data.disk.write_all);
            //     this.diskdata[i].speed = res.data.disk.write_all;
            //   // } else if (this.diskdata[i].name == this.$t('Total-wr-time')) {
            //   //   this.diskdata[i].speed = this.timeTosize(this.alldisk.write_time);
            //   } else if (this.diskdata[i].name == this.$t('Rd-speed')) { //读速度
            //     // this.diskdata[i].speed = this.bytesToSize2(this.alldisk.ips);
            //     this.diskdata[i].speed = this.alldisk.ips;
            //   } else if (this.diskdata[i].name == this.$t('Total-rd')) { //总读量
            //     // this.diskdata[i].speed = this.bytesToSize(res.data.disk.read_all);
            //     this.diskdata[i].speed = res.data.disk.read_all;
            //   // } else if (this.diskdata[i].name == this.$t('Total-rd-time')) {
            //   //   this.diskdata[i].speed = this.timeTosize(this.alldisk.read_time);
            //   // } else if (this.diskdata[i].name == this.$t('Waiting-time')) {
            //   //   this.diskdata[i].speed = this.timeTosize(this.alldisk.busy_time);
            //   }
            // }
            this.allnet = res.data.net;
            for (const item of this.netdata) {
              if (item.name == this.$t('NIC-Match')) {
                item.status = this.allnet.is_mode;
              } else if (item.name == this.$t('Connections')) {
                item.status = this.allnet.link;
              // } else if (item.name == this.$t('Receive-packet-loss')) {
              //   item.status = this.allnet.net_drop.in;
              // } else if (item.name == this.$t('Send-packet-loss')) {
              //   item.status = this.allnet.net_drop.out;
              } else if (item.name == this.$t('Current-bandwidth')) {
                item.status = this.allnet.bandwidth + "Mpbs/s";
              }
            }
            console.log('net', this.allnet)
            // this.loading = false
          }
        })
        .catch(error => {
          // this.$message.error(this.$t('Data_failure'));
          this.loading = false
        }).finally(() => {
          this.loading = false
        })
    },
    timeTosize(time) {
      //时间单位的转换
      if (time < 1000 * 60) {
        return time / (1000).toFixed(0) + " s";
      } else if (time >= 1000 * 60 && time < 60 * 1000 * 60) {
        return (time / (1000 * 60)).toFixed(0) + " Min";
      } else if (time >= 1000 * 60 * 60 && time < 60 * 1000 * 60 * 24) {
        return (time / (1000 * 60 * 60)).toFixed(0) + " H";
      } else if (
        time >= 1000 * 60 * 60 * 24 &&
        time < 60 * 1000 * 60 * 24 * 365
      ) {
        return (time / (1000 * 60 * 60 * 24)).toFixed(0) + " Day";
      } else if (time >= 1000 * 60 * 60 * 24 * 365) {
        return (time / (1000 * 60 * 60 * 24 * 365)).toFixed(0) + " Year";
      } else {
        return time + "ms";
      }
    }
  }
};
</script>
<style scoped>
.main {
  font-size: 1.1em;
  color: var(--themeColor);
  font-weight: 700;
}
.net {
  background-color: #f0f2f5;
  text-align: center;
  height: 3rem;
  line-height: 3rem;
  overflow-y: auto;
}
.ico {
  font-size: 2.5em;
  color: var(--themeColor);
  float: left;
  padding-right: 1rem
}
</style>
<style scoped>
  .normal-icon {
    float: left;
    padding-right: 1rem;
    color: var(--themeColor);
    font-size: 30px;
  }
  .net-segment-icon {
    cursor: pointer;
    font-size: 30px;
    color: var(--themeColor);
  }
</style>